<template>
  <div class="detail-tab3 content">
    <div class="content">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div class="title-small">风险衡量图</div>
        <div>
          <el-form
            ref="headerSearchForm"
            :model="headerSearchForm"
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="券源" prop="bondSource">
              <el-select
                v-model="headerSearchForm.bondSource"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in quanyuanData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="挂钩曲线" prop="hookCurve">
              <el-select
                v-model="headerSearchForm.hookCurve"
                placeholder="请选择"
                size="mini"
                clearable
                @chage="selectChange"
              >
                <el-option
                  v-for="(item, index) in guagouData"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="charts">
        <!-- 图表 -->
        <MultipleLine
          :id="'multipleLine'"
          :chartData="chartData"
          v-if="chartData.data.length > 0"
        />
        <div v-else style="text-align: center; padding: 100px">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title-small mg-b20">最新风险值</div>
      <el-table
        :data="tableData"
        class="tableBoxChild"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" align="center" type="index">
        </el-table-column>
        <el-table-column
          prop="bondSname"
          label="债券名称"
          align="center"
          width="180px"
        >
          <template slot-scope="scope">
            <span class="link" @click="toLink(scope.row)">{{
              scope.row.bondSname
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bondType" label="债券类别" align="center">
        </el-table-column>
        <el-table-column prop="riskLevel" label="风险衡量值" align="center">
        </el-table-column>
        <!-- <el-table-column prop="creditInterest" label="信用利差" align="center">
        </el-table-column> -->
        <el-table-column prop="remaningTerm" label="剩余年限" align="center">
        </el-table-column>
        <el-table-column prop="issueTerm" label="发行年限" align="center">
        </el-table-column>
        <el-table-column prop="issueDate" label="发行日期" align="center">
        </el-table-column>
        <el-table-column prop="issueAmount" label="发行规模(亿)" align="center">
        </el-table-column>
        <el-table-column prop="couponRate" label="票面利率(%)" align="center">
        </el-table-column>
        <el-table-column
          prop="remaningAmount"
          label="未尝余额(亿)"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="maturityStatus" label="债券状态" align="center">
        </el-table-column>
        <el-table-column prop="dataDate" label="数据日期" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import MultipleLine from "./charts/MultipleLine.vue";
import {
  BondSource,
  HookCurve,
  LatestRiskValue,
  RiskMeasurementCurve,
} from "@/api/customerManagement/issuerManagement/issuer.js";

export default {
  name: "DetailTab1",
  components: {
    MultipleLine,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      headerSearchForm: {
        bondSource: "",
        hookCurve: "",
      },
      quanyuanData: [],
      guagouData: [],
      tableData: [],
      multipleSelection: [],
      bondIdList: [],
      chartData: {
        xAxisData: [],
        data: [],
      },
    };
  },
  watch: {
    multipleSelection: {
      handler: function (newValue, oldValue) {
        const bondIdList = [];
        newValue.forEach((element) => {
          bondIdList.push(element.bondId);
        });
        if (
          bondIdList.length > 0 &&
          this.headerSearchForm.bondSource === "BOND_SOURCE4"
        ) {
          this.bondIdList = bondIdList;
          this.getChartData();
        }
      },
      deep: true,
      // immediate: true,
    },
    headerSearchForm: {
      handler: function (newValue, oldValue) {
        // console.log(newValue, '数据变化');
        if (newValue.bondSource && newValue.hookCurve) {
          console.log(newValue, "数据变化");
          this.getChartData();
        }
      },
      deep: true,
      // immediate: true,
    },
    "headerSearchForm.hookCurve": {
      handler: function (newValue, oldValue) {
        this.$emit("hookCurveChange", newValue);
      },
    },
  },
  mounted() {},
  created() {
    this.getOptions();
  },
  methods: {
    toLink(row) {
      localStorage.setItem("bondId", row.bondId);
      this.$router.push({
        name: "bondRiskProfileDetail",
        query: {
          bondId: row.bondId,
        },
      });
    },
    async getOptions() {
      const params = {
        customerId: this.rowData.customerId,
      };
      const { data } = await BondSource(params);
      const options = [];
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          const element = data[key];
          options.push({
            label: element,
            value: key,
          });
        }
      }
      this.quanyuanData = options;
      // this.headerSearchForm.bondSource = this.quanyuanData[0].value;
      this.headerSearchForm.bondSource = "BOND_SOURCE1";

      const data1 = await HookCurve(params);
      this.guagouData = data1.data;
      this.headerSearchForm.hookCurve = "国债收益率曲线";
      this.getData();
      this.getChartData();
    },
    async getData() {
      const params = {
        customerId: this.rowData.customerId,
        hookCurve: this.headerSearchForm.hookCurve,
      };
      const { data } = await LatestRiskValue(params);
      this.tableData = data;
    },
    selectChange(val) {
      console.log(val, "222222222222222222222");
    },
    async getChartData() {
      if (
        !this.headerSearchForm.hookCurve &&
        this.headerSearchForm.bondSource != "BOND_SOURCE1"
      ) {
        this.$message.warning("请选择债券");
        return;
      } else {
        // console.log('请求图标数据');
        const params = {
          customerId: this.rowData.customerId,
          bondSource: this.headerSearchForm.bondSource,
          hookCurve: this.headerSearchForm.hookCurve,
          bondCode: this.bondIdList,
        };
        let { data } = await RiskMeasurementCurve(params);
        const chartData = {
          xAxisData: [],
          data: [],
        };
        this.chartData = [];
        const dateList = [];
        data.forEach((element) => {
          element.data.forEach((item) => {
            dateList.push(item.dataDate);
          });
          chartData.data.push({
            name: element.bondName,
            data: [],
          });
        });
        // dateList 去重
        const xData = Array.from(new Set(dateList));
        // const xData = dateList
        xData.sort((a, b) => {
          return a - b;
        });
        chartData.xAxisData = xData;
        chartData.data.forEach((cItem, index) => {
          const yData = [];
          xData.forEach((xItem, xindex) => {
            yData.push("");
          });
          cItem.data = yData;
        });
        chartData.data.forEach((cItem, index) => {
          data[index].data.forEach((dItem) => {
            xData.forEach((xItem, xindex) => {
              if (dItem.dataDate === xItem) {
                cItem.data[xindex] = dItem.riskLevel || dItem.avgRiskLevel;
              }
            });
          });
        });
        this.chartData = chartData;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
  }
  .mg-b20 {
    margin-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
.link {
  color: #1f9bfd;
  border-bottom: 1px solid #1f9bfd;
  cursor: pointer;
}
</style>
